<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { NCheckboxGroup, NSpace, NCheckbox, NButton, NFormItem, NTag, NTreeSelect } from "naive-ui";

import JPop from "@/components/j-pop/index.vue";
import { usePopStore } from "@/stores/pop";
import { validateHeaderName } from "http";

const popStore = usePopStore();

interface IProp {
    list: any[];
    selected: any[]
}
// interface Item {
//     label: string;
//     value: any;
// }

const props = defineProps<IProp>();

const emit = defineEmits(["change"]);

const cities = ref(null);

watch(() => props.selected, (val) => {
    cities.value = val;
})

const onSure = () => {
    console.log(cities.value);
    emit("change", cities.value);
};
</script>

<template>
    <JPop title="修改标签" :show="popStore.tags" @close="popStore.tags = false">
        <div class="c-box">
            <n-checkbox-group v-model:value="cities" class="c-group">
                <n-space item-style="display: flex;">
                    <n-checkbox v-for="item in list" :value="item._id" :label="item.name" />
                </n-space>
            </n-checkbox-group>
            <n-space class="c-btns">
                <n-button type="tertiary" @click="popStore.tags = false"> 取消 </n-button>
                <n-button type="primary" @click="onSure"> 确定 </n-button>
            </n-space>
        </div>
    </JPop>
</template>

<style lang="less" scoped>
@import url("./index.less");
</style>
